<template>
    <div id="info-bar" :style="{width: $store.state.availableWidth}" class="px-3">
        <span class="float-left">{{typeInfo}}</span>
        <span class="float-right">已全部加载,共{{length}}个</span>
    </div>
</template>

<script>
    export default {
        name: "MyInfoBar",
        props: {
            type: {
                default: 'other'
            },
            length: {
                default: 0
            }
        },
        computed: {
            typeInfo() {
                switch (this.type) {
                    case 'audio':
                        return '音频文件';
                    case 'video':
                        return '视频文件';
                    case 'other':
                        return '其它文件';
                    case 'image':
                        return '图片文件';
                    case 'recycle':
                        return '回收站';
                    default :
                        return '其它文件';
                }
            }
        }
    }
</script>

<style scoped>
    #info-bar {
        position: fixed;
        top: 125px;
        height: 20px;
        line-height: 20px;
        font-size: 15px;
        color: rgb(102, 102, 102);
    }
</style>